<template>
	<view id="app">
		<view class="mian">
			<view class="User">
				<view class="user-left-box">
					<view class="user-headImage max-nickName">
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="user-right-box">
					<view class="user-nickName">
						用户{{uid}}
					</view>
					<view class="user-saidContent">
						{{receive_content}}
					</view>
				</view>
			</view>
			
			<view class="my">
				<view class="user-right-box">
					<view class="user-nickName max-nickName">
						用户{{to_uid}}
					</view>
					<view class="user-saidContent">
						{{receive_content}}
					</view>
				</view>
				<view class="user-left-box">
					<view class="user-headImage">
						<image src="../../static/logo.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="send-navtion">
				<textarea  class="send-input" auto-height></textarea>
			</view>
			<view class="send-btn">
				发送
			</view>
		</view>
	</view>
</template>
/**
 * 思路：1.当进入页面 或 刷新页面，会触发后端的 onConnect连接事件，onConnect连接事件给前端发送 要求绑定的消息【预绑定】（php->vue）,
 2.接受到绑定的 指令 后，带当前登录的用户id 发送到 后端的 onMessage 进行绑定
 第一进来必须：由前端给一个 id 发送到后端 进行绑定，
*/
<script>
	export default {
		data() {
			return {
				//由 uni.connectSocket() 接口创建的 socketTask
				socketTask:'',
				//链接地址
				wsUrl:'ws://ecm2tm3p5x.jojobm.com:2348',
				//用户id
				uid:'',
				//对方的uid
				to_uid:'',
				//发送的内容
				send_content:'',
				//接受到的内容
				receive_content:'',
				receive_id:'',
				heart:null,
				//是否连接成功
				is_reconnect_ok:false,
				//当前重连次数
				reconnect_num:0,
				//最多连接几次后，失败不在连接
				max_reconnect_num:20,
			}
		},
		onLoad(e) {
			this.uid = e.uid
			console.log('uid',this.uid)
			//this.createSocketTask()
		},
		methods: {
			fasong(){
				let binding_data ={
					type:"receive_text_send",
					msg:this.send_content,
					to_uid:this.to_uid,
					uid:this.uid
				}
				this.sendSocketTask(binding_data)
			},
			
			//SocketTask 由 uni.connectSocket() 接口创建。
			createSocketTask(){
				//***创建成功，并不代表连接成功
				this.socketTask = uni.connectSocket({
					url:this.wsUrl,
					success: (res) => {
						//创建成功，并不代表连接成功
						console.log("创建websocket成功")
					}
				});
				//监听 WebSocket 连接打开事件
				this.openSocketTask()
				//监听消息事件 ，通过 WebSocket 连接发送数据
				this.messageSocketTask()
				//监听错误事件
				this.onErrorSocketTask()
				//监听 WebSocket 连接关闭、断开事件
				this.onCloseSocketTask()
			},
			//监听 WebSocket 连接打开事件，连接成功必定可以打开
			openSocketTask(){
				this.socketTask.onOpen((res)=>{
					console.log('WebSocket连接已打开！连接成功！')
					this.is_reconnect_ok = true
					uni.hideLoading()
					this.scoketHeart()
				})
			},
			//监听 WebSocket 连接关闭、断开事件
			onCloseSocketTask(){
				this.socketTask.onClose((res)=>{
					console.log('WebSocket连接失败，请检查！',res);
					uni.showToast({
						title:'WebSocket连接失败，请检查！',
						icon:'none'
					})
					//将状态改为已断开，防止刚开始连接成功后状态是成功而没有重连
					this.is_reconnect_ok = false
					//清空心跳
					clearInterval(this.heart)
					//进行重连
					this.reconnect()
				})
			},
			//监听 WebSocket 错误事件
			onErrorSocketTask(){
				this.socketTask.onError( (res)=>{
					console.log('WebSocket连接错误！',res);
					uni.showToast({
						title:'WebSocket连接错误！',
						icon:'none'
					})
				})
			},			
			//监听 WebSocket 接受到服务器的消息事件
			messageSocketTask(){
				this.socketTask.onMessage((res)=>{
					console.log(res)
					let data = JSON.parse(res.data)
					switch(data.type){
						case "requset_binding"://当进来或刷新时，后端gateway请求把id带过去绑定当前用户
							let binding_data = {
								type:"requset_binding",
								uid:this.uid
							}
							this.sendSocketTask(binding_data)
							break;						
						case "receive_binding"://接收绑定是否成功状态
							console.log(data.msg)
							break;
						case "receive_text_send"://接收发送的文本消息是否成功状态
							this.receive_content = data.msg
							this.receive_id = data.to_uid
							break;
						case "receive_heart_send"://接收心跳数据
								//console.log(data)
							break;												
					}
				})
			},
			//通过 WebSocket 发送数据
			sendSocketTask(data){
				// return new Promise((reslove, reject) => {
					this.socketTask.send({
						data:JSON.stringify(data),
						success: (success) => {
							console.log('发送成功状态',success)
						},
						fail:(err) => {
							console.log('发送失败状态',err)
							//断开连接
							if(err.errMsg == 'sendSocketMessage:fail Error: SocketTask.readyState is not OPEN')
							{
								//清空心跳
								clearInterval(this.heart)
							}
						},
						
					})
				// })
			},
			//按钮点击 关闭 WebSocket 连接
			closeSocketTask(){
				this.socketTask.close( (res)=>{
					console.log('关闭WebSocket成功！');
				})
				//如果连接关闭取消心跳
				clearInterval(this.heart)
			},
			//重新连接
			reconnect(){
				console.log('进入断线重连');
				this.socketTask = ''
				if(this.is_reconnect_ok == false){
					if(this.reconnect_num < this.max_reconnect_num){
						setTimeout(()=>{
							this.createSocketTask()
						},2000)
						this.reconnect_num  = this.reconnect_num + 1
						console.log("重连次数",this.reconnect_num)
						uni.showLoading({
							title:'尝试重连中，第'+this.reconnect_num+'次',
						})
					}

				}

			},
			//心跳，保持连接活性
			scoketHeart(){
				clearInterval(this.heart)
				let binding_data ={
					type:"receive_heart_send",
					msg:'心跳数据',
					uid:this.uid
				}
				this.heart = setInterval(()=>{
					let data = this.sendSocketTask(binding_data)
				},1000 * 8)
			}
		}
	}
</script>

<style lang="less">
@import url('index.less');
</style>
